<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../js/vue.js">
    </script>
    <style>
        .v-cloak {
            display: none;
        }
    </style>
</head>
<body>

<div id="root">


    <h2>当前number:{{number}}</h2>
    <h2>乘十后的number:<span v-ten-times="number"></span></h2>
    <button @click="number++">点击使number+1</button>

</div>

<script type="text/javascript">
    Vue.config.printWarnings = false;
    //全局自定义指令
    Vue.directive('ten-times', {
        //el:指令元素
        //binding:指令的信息
        bind: function (el, binding) {
            el.innerHTML = binding.value * 10;
        },
        //当指令元素被插入页面中时调用一次
        inserted: function (el, binding) {
            el.innerHTML = binding.value * 10;
        },
        //当数据发生变化的时候调用
        update: function (el, binding) {
            el.innerHTML = binding.value * 10;
        }
    })
    const vm = new Vue({
        el: '#root',
        data: {
            number: 10,
        },
        directives: {
            //对象的形式
            tenTimes: {
                //初次绑定的时候调用一次
                bind: function (el, binding) {
                    console.log(el)
                    console.log(binding)
                    el.innerHTML = binding.value * 10;
                },
                //当指令元素被插入页面中时调用一次
                inserted: function (el, binding) {
                    el.innerHTML = binding.value * 10;
                },
                //当数据发生变化的时候调用
                update: function (el, binding) {
                    el.innerHTML = binding.value * 10;
                }
            }
            //函数的形式
            // tenTimes: function (el, binding) {
            //     el.innerHTML = binding.value * 10;
            // }
        }

    })

</script>
</body>

</html>